<template>
  <div 
    class="bg-white rounded-[20px] p-4 mb-4 will-change-transform cursor-pointer" 
    @click="$emit('play-example')"
  >
    <p 
      class="text-lg leading-relaxed mb-2 text-black" 
      v-html="highlightedExample"
    ></p>
    <p 
      v-if="showDefinition && example.translation" 
      class="text-base text-black/70 animate-fadeIn"
    >
      {{ example.translation }}
    </p>
  </div>
</template>

<script setup>
defineProps({
  example: {
    type: Object,
    required: true
  },
  highlightedExample: {
    type: String,
    required: true
  },
  showDefinition: {
    type: Boolean,
    default: false
  }
});

defineEmits(['play-example']);
</script>

<style scoped>
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}
</style> 